<template>
  <view>
    <view class="topSty">
      <div style="height: 50rpx"></div>
      <Title :title="title" />
      <!-- <OrderCity :allInfo="allInfo.orderInfo"/> -->
      <!-- <route v-if="allInfo.orderInfo.demand.split(',').includes('1')" :allInfo="allInfo.orderInfo" /> -->
      <view class="h-50 mb-30"></view>
    </view>
    <!-- <BaseInfo :allInfo="allInfo.orderInfo" /> -->
    <view class="bg-white p-24 boxInfoSty">
      <view class="title">
        <image
          class="ico w-50 h-50 flex-shrink-0"
          :src="getImageUrl(get(allInfo, 'quoInfo.user.avatar'))"
          mode="aspectFill"
        >
        </image>
        <view class="name">
          {{ get(allInfo, "quoInfo.user.username") || "" }}
        </view>
      </view>
      <view
        class="fz24 text-555 mt-16 mb-26"
        v-if="get(allInfo, 'quoInfo.user_info.profile', '')"
      >
        <u-read-more
          ref="uReadMore"
          @open="openRead"
          @close="closeRead"
          :toggle="true"
          showHeight="168"
          :shadowStyle="shadowStyle"
          :closeText="$t('展开')"
          openText=""
          :class="{
            readMoreSty: open == true || open == false,
            readMoreOpen: open == true,
          }"
        >
          <rich-text
            :nodes="get(allInfo, 'quoInfo.user_info.profile', '')"
          ></rich-text>
        </u-read-more>
      </view>
      <view class="between">
        <view class="advantage" v-for="item in advantageList">
          <image class="w-35 h-35" src="/static/icon/treat.png"></image>
          <p>{{ item }}</p>
        </view>
      </view>
      <view class="priceSty">
        <view class="flex-row mt-35">
          <view class="">
            <span class="fz28 text-555">{{$t('合计报价')}}：</span>
            <span class="fz28 text-5353 font-bold"
              >{{ get(allInfo, "quoInfo.price_unit") || ""
              }}{{ get(allInfo, "quoInfo.price") || "" }}</span
            >
          </view>
          <view class="ml-70">
            <span class="fz28 text-555">{{$t('过程时效')}}：</span>
            <span class="text-111 fz28 font-bold"
              >{{ get(allInfo, "quoInfo.validity") || "" }}{{$t('天')}}</span
            >
          </view>
        </view>
        <view class="mt-48 mb-36">
          <span class="fz28 text-555">{{$t('有效期至')}}：</span>
          <span class="text-111 fz28 font-bold">{{
            get(allInfo, "quoInfo.quotation_end_at") || ""
          }}</span>
        </view>
      </view>
    </view>
    <view
      v-if="
        allInfo.orderInfo.demand.split(',').length == 1 &&
        allInfo.orderInfo.demand == '1'
      "
    >
      <p class="font-bold fz32 text-111 mt-30 mb-10 ml-48">{{$t('车辆信息')}}</p>
      <div class="flex-1" style="overflow-y: auto">
        <div class="vehicle-item">
          <div class="status">
            <span v-if="get(allInfo, 'orderInfo.status') === 1">{{$t('空闲中')}}</span>
            <span v-if="get(allInfo, 'orderInfo.status') === 2">{{$t('待出发')}}</span>
            <span v-if="get(allInfo, 'orderInfo.status') === 3">{{$t('进行中')}}</span>
            <span v-if="get(allInfo, 'orderInfo.status') === 4">{{$t('停用')}}</span>
          </div>
          <div class="content">
            <div class="flex mt-40 ml-30">
              <image
                src="../../static/icon/carLogo.png"
                mode=""
                class="w-35 h-35 ml-24"
              ></image>
              <view class="carBox">
                <view class="carCard">
                  <span class="ml-11">{{
                    get(allInfo, "quoInfo.car.trailer_number") || get(allInfo, "quoInfo.car.car_number")
                  }}</span>
                </view>
              </view>
              <div class="fz30 font-bold ml-15" style="width: 450rpx;">
                {{ get(allInfo, "quoInfo.car.driver_title") }}
              </div>
            </div>
            <div class="mt-15 ml-50">
              <!-- <div class="flex-shirnk-0 flex">
								<image src="/static/icon/address.png" mode="widthFix" class="w-20 default-address-icon">
								</image>
								<image src="/static/icon/address-o.png" mode="widthFix" class="w-20 work-address-icon">
								</image>
								<div class="text-888 fz22 ml-8 mr-8 address-text"></div>
							</div> -->
              <div class="text-999 fz22 mr-34">
                {{$t('当前绑定')}}：{{ get(allInfo, "quoInfo.car.bind_user_title") }}
                <!-- {{ get(item, "area.mergename") }}
								{{ new Date(item.updatetime * 1000).toLocaleString() }} -->
              </div>
            </div>
            <div
              class="between mt-24 ml-35"
              style="
                border-radius: 16rpx;
                background-color: #f8f8f8;
                width: 90%;
              "
            >
              <div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
                <div class="font-bold fz25 text-333">
                  {{ get(allInfo, "quoInfo.car.car_category_name.title") }}
                </div>
                <div class="fz22 text-666 mt-10">{{$t('车型')}}</div>
              </div>
              <div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
                <div class="font-bold fz25 text-333">
                  {{ get(allInfo, "quoInfo.car.car_l") }}*{{
                    get(allInfo, "quoInfo.car.car_w")
                  }}*{{ get(allInfo, "quoInfo.car.car_h") }}
                </div>
                <div class="fz22 text-666 mt-10">{{$t('车厢尺寸')}}(m)</div>
              </div>
              <div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
                <div class="font-bold fz25 text-333">
                  {{ get(allInfo, "quoInfo.car.product_weight") }}{{$t('吨')}}
                </div>
                <div class="fz22 text-666 mt-10">{{$t('载重')}}</div>
              </div>
              <div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
                <div class="font-bold fz25 text-333">
                  {{ get(allInfo, "quoInfo.car.product_volume") }}m³
                </div>
                <div class="fz22 text-666 mt-10">{{$t('体积')}}</div>
              </div>
            </div>

            <div
              class="between mt-12 rounded-8 p-18 data ml-35"
              style="background-color: #eaf6ff; position: relative; width: 90%"
            >
              <div class="current">{{$t('当前')}}</div>
              <div class="flex ml-50">
                <div class="text-666 fz22">{{$t('曝光量')}}：</div>
                <div class="fz22 text-333 font-bold">
                  {{ get(allInfo, "quoInfo.car.exposure_number") }}
                </div>
              </div>
              <div class="flex">
                <div class="text-666 fz22">{{$t('查看量')}}：</div>
                <div class="fz22 text-333 font-bold">
                  {{ get(allInfo, "quoInfo.car.lookat_number") }}
                </div>
              </div>
              <div class="flex mr-50">
                <div class="text-666 fz22">{{$t('咨询量')}}：</div>
                <div class="fz22 text-333 font-bold">
                  {{ get(allInfo, "quoInfo.car.comment_number") }}
                </div>
              </div>
            </div>
            <div class="between ml-50 mr-50 pb-40">
              <div class="text-999 fz20">
                {{ get(allInfo, "quoInfo.car.area.name") }}
              </div>

              <div class="flex justify-end mt-22 mb-9 fz24">
                <image
                  src="/static/icon/message.png"
                  mode="widthFix"
                  class="w-25"
                ></image>
                <div class="text-888 ml-8 text-888 fz24" @click="callDriver">{{$t('联系')}}TA</div>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 250rpx"></div>
      </div>
    </view>
    <view v-else class="">
      <view class="bg-white rounded-26 ml-24 mr-24">
        <p class="font-bold fz28 text-111 mb-24 pt-24 pl-24">{{$t('报价说明')}}</p>
        <view class="pricedesSty">{{
          get(allInfo, "quoInfo.transport_remark.remark")
        }}</view>
        <p class="font-bold fz28 text-111 mb-24 pt-24 pl-24">{{$t('图片')}}/{{$t('视频')}}</p>
        <view class="item_photo">
          <image
            v-for="item in allInfo.quoInfo.transport_attachment"
            class="ph"
            :src="getImageUrl(item.path)"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <!-- <view class="bg-white rounded-26 ml-24 mr-24 mt-24">
				<p class="font-bold fz28 text-111 mb-24 pt-24 pl-24">{{$t('服务报价')}}</p>
				<view class="pricedesSty">{{ get(allInfo, "quoInfo.remark.remark") }}</view>
				<p class="font-bold fz28 text-111 mb-24 pt-24 pl-24">{{$t('图片')}}/{{$t('视频')}}</p>
				<view class="item_photo">
					<image v-for="item in allInfo.quoInfo.attachment" class="ph" :src="IMAGE_URL + item.path"
						mode="aspectFill"></image>
				</view>
			</view> -->
    </view>
    <u-modal
      class="modalSty"
      :show="showTel"
      :content="content"
      :showCancelButton="true"
      @cancel="cancelTel"
      @confirm="confirmTel"
    ></u-modal>
    <view class="empty"></view>
    <view class="footer_btn4">
      <view class="btn_item" @click="callUser">
        <image
          class="ico"
          src="/static/img/ico_b1.png"
          mode="aspectFill"
        ></image>
        <view class="name"> {{$t('联系商家')}} </view>
      </view>
      <view class="btn_blue" @click="confirmCoop"> {{$t('确认合作')}} </view>
    </view>
  </view>
</template>

<script>
import Title from "./components/title.vue";
import OrderCity from "./components/orderCity.vue";
import BaseInfo from "./components/baseInfo.vue";
import { sendDelivery } from "@/api/order.js";
import route from "./components/route.vue";
import { request_minute } from "@/api/basic";
export default {
  components: {
    Title,
    OrderCity,
    BaseInfo,
    route,
  },
  data() {
    return {
      title: this.$t('报价详情'),
      IMAGE_URL: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/",
      advantageList: [this.$t('保证金'), this.$t('投保货物险'), this.$t('投保运输险')],
      open: false,
      showTel: false,
      content: "",
      content:
        "广州极速物流发展有限公司 成立于2021年，广州极速物流发展有限公司 成立于2021年，广州极速物流发展有限公司 成立于2021年，广州极速物流发展有限公司 成立于2021年，广州极速物流发展有限公司 成立于2021年，总部位于中致力于为全球客户提供优质、广州极速物流发展有限公司 成立于2021年，总部位于中致力于为全球客户提供优质、广州极速物流发展有限公司 成立于2021年，总部位于中致力于为全球客户提供优质、广州极速19玉，物流发展有限公司凭借物流技术、丰富的经验州极速19玉州极速速19玉广州极速物流发展有限公司 成立于2021年，总部位于中致力于为全球客户提供优质、广州极速19玉，物流发展有限公司凭借物流技术、丰富的经验州极速19玉州广州极速物流发展有限公司 成立于2021年，总部位于中致力于为全球客户提供优质、广州极速19玉，物流发展有限公司凭借物流技术、丰富的经验州极速19玉州极速速19玉广州极速物流发展有限公司 成立于2021年，总部位于中致力于为全球客户提供优质、广州极速19玉，物流发展有限公司凭借物流技术、丰富的经验州极速19玉州极速速19玉",
      // allInfo: {
      // 	orderTime: '2024-12-21 10:35',
      // 	modeTransportTop: '大件 - 全包',
      // 	departure_id: this.$t('中国'),
      // 	reach_id: this.$t('俄罗斯'),
      // 	beginCity: '黑龙江-大庆市',
      // 	endCity: '莫斯科-诺克萨斯州',
      // 	cargoInfo: '办公用品/2吨/4立方米/木架装',
      // 	cargoInfo1: this.$t('办公用品'),
      // 	cargoInfo2: '2吨',
      // 	cargoInfo3: this.$t('立方米'),
      // 	modeTransport: '公路汽运 - 整车 - 厢式货车',
      // 	shipperBid: '￥59998.00',
      // 	btnInfo: '已收到3份报价',
      // 	btnAble: 'toQuote',
      // 	requireInfo: [0,1,2]
      // },
      allInfo: {},
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "100px",
        marginTop: "-100px",
      },
    };
  },
  onLoad(options) {
    this.allInfo = JSON.parse(options.item);
    console.log("1111", this.allInfo.orderInfo);
    console.log("1222222", this.allInfo.quoInfo);
    // this.slog(this.allInfo)
  },
  methods: {
    getImageUrl(url = "") {
      console.log(url);
      if (url.indexOf("://") > -1) {
        return url;
      } else {
        return this.IMAGE_URL + url;
      }
    },
	callDriver() {
		console.log('this.allInfo00', this.allInfo)
		// console.log('tuni.getStorageSync("user_id")', uni.getStorageSync("user_id"))
		return
		if(uni.getStorageSync("user_id") == this.allInfo.quoInfo.car.driver_id) {
			uni.showToast({
				title: this.$t('不能给自己打电话'),
				icon: "none",
			});
		} else {
			request_minute({
				user_id: uni.getStorageSync("user_id"),
				target_id: this.allInfo.quoInfo.car.driver_id || '',
			}).then(res => {
				if (res.data.data.flag == 1) {
					this.isMessageGo({
						action: 'call',
						data: {
							userId: this.allInfo.quoInfo.car.driver_id || '',
							type: res.data.data.type || 1,
						}
					})
				} else {
					uni.$u.toast('积分不足，请充值积分')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
						})
					}, 500)
				}
				console.log('res0000', res)
			})
		}
	},
    openRead() {
      this.open = true;
    },
    closeRead() {
      this.open = false;
    },
    cancelTel() {
      this.showTel = false;
    },
    confirmTel() {
      uni.makePhoneCall({
        phoneNumber: this.allInfo.orderInfo.tel || "",
      });
      this.showTel = false;
    },
    callUser() {
      if (uni.getStorageSync("user_id") == this.allInfo.quoInfo.user_id) {
        uni.showToast({
          title: this.$t('不能给自己打电话'),
          icon: "none",
        });
      } else {
        request_minute({
          user_id: uni.getStorageSync("user_id"),
          target_id: this.allInfo.quoInfo.user_id,
        }).then((res) => {
          if (res.data.data.flag == 1) {
            this.isMessageGo({
              action: "call",
              data: {
                userId: this.allInfo.quoInfo.user_id,
                type: res.data.data.type || 1,
              },
            });
          } else {
            uni.$u.toast("积分不足，请充值积分");
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/vip/scorePoint",
              });
            }, 500);
          }
        });
      }
    },
    confirmCoop() {
      const { quoInfo } = this.allInfo;
      const { car } = quoInfo;
	  console.log('car---', car, quoInfo)
      if (car.status == 3) {
        this.toast("该车辆已在订单中，等待订单结束后即可合作");
        return;
      }
      uni.showModal({
        title: this.$t('提示'),
        content: this.$t('是否确认合作'),
        success: (res) => {
          if (res.confirm) {
            sendDelivery({
              is_transport: this.allInfo.orderInfo.attach.is_transport,
              quota_id: this.allInfo.quoInfo.id,
              user_id: uni.getStorageSync("user_id"),
              delivery_id: this.allInfo.orderInfo.id,
            }).then((res) => {
              if (res.data.code == 200) {
                // setTimeout(() => {
                // 	uni.navigateBack({
                // 		delta: 1
                // 	});
                // }, 1500)
                uni.redirectTo({
                  url: "/pages/shipmentRecord/result",
                });
              } else {
                uni.$u.toast(res.data.message);
              }
              this.toast(res.data.message);
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="less">
page {
  background: #f6f7fb;
}

.topSty {
  border-radius: 0 0 40rpx 40rpx;
  background: #f6f7fb url("/static/bg/backcolorImg.png") no-repeat top / 100%;
  // padding-top: 20rpx;
}

.boxInfoSty {
  width: 95%;
  border-radius: 26rpx;
  // padding: 30rpx 24rpx;
  margin: 16rpx auto;
}

.empty {
  width: 100%;
  height: 200rpx;
}

.readMoreSty {
  // overflow: hidden;
  // text-overflow:ellipsis;
  // white-space: wrap;
  // word-break: break-all;
  position: relative;

  /deep/ .u-read-more__toggle {
    justify-content: flex-end !important;
  }

  /deep/ .u-text__value {
    font-size: 28rpx !important;
    color: #278aff;
  }

  /deep/ .u-read-more__content {
    font-size: 24rpx;
    line-height: 56rpx;
    color: #535353;
    // height: auto !important;
    text-indent: 0 !important;
    min-height: 40rpx;
  }

  /deep/ .u-read-more__toggle__text {
    width: 80rpx;
    height: 28rpx;
    position: absolute;
    background-color: #fff;
    bottom: 16rpx;
  }
}

.readMoreOpen {
  /deep/ .u-read-more__content {
    height: auto !important;
  }

  /deep/ .u-read-more__toggle__text {
    bottom: -20rpx;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 90rpx;
  border-bottom: 1rpx solid #f0f0f0;

  // margin: 0 24rpx;
  .ico {
    flex-shrink: 0;
    border-radius: 10rpx;
    margin-right: 15rpx;
  }

  .name {
    color: #1d1d1d;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 28rpx;
  }
}

.priceSty {
  // height: 172rpx;
  margin-top: 32rpx;
  border-top: 1rpx solid #f0f0f0;
  // border-bottom: 1rpx solid #F0F0F0;
  // padding-left: 15rpx;
}

.advantage {
  width: 208rpx;
  height: 48rpx;
  flex-shrink: 0;
  border-radius: 500rpx;
  background: #e5fae7;
  display: flex;
  justify-content: flex-start;

  image {
    // vertical-align: middle;
    margin-top: 7rpx;
    margin-left: 7rpx;
  }

  p {
    color: #009f1d;
    font-family: "PingFang SC";
    font-size: 22rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 48rpx;
    margin-left: 18rpx;
  }
}

.footer_btn4 {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 30rpx 24rpx 60rpx;

  .btn_blue {
    width: 566rpx;
    height: 94rpx;
    flex-shrink: 0;
    border-radius: 500rpx;
    border: 2rpx solid rgba(3, 189, 130, 0.1);
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    line-height: 94rpx;
  }

  .btn_item {
    text-align: center;
    padding: 0 10rpx;

    .name {
      color: #8c8c8c;
      font-size: 20rpx;
      line-height: 22rpx;
    }
  }

  .ico {
    width: 42rpx;
    height: 42rpx;
  }
}

.item_photo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 24rpx;
  padding: 10rpx 20rpx 30rpx;

  .ph {
    width: 200rpx;
    height: 200rpx;
    flex-shrink: 0;
    border-radius: 20rpx;
  }
}

.pricedesSty {
  // width: 100%;
  height: 328rpx;
  background: #f7f7f7;
  margin-left: 24rpx;
  margin-right: 24rpx;
  border-radius: 18rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 16rpx;
}

.modalSty {
  text-align: center;
}

.vehicle-item {
  margin-top: 16rpx;
  height: 135rpx;
  position: relative;
  margin-bottom: 60rpx;

  .content {
    background-image: url("/static/bg/vehicle-item-bg.png");
    background-size: 100% 100%;
    width: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;

    .carBox {
      // width: 194rpx;
      height: 44rpx;
      border-radius: 6px;
      background: #fcce00;
      margin-left: 20rpx;

      .carCard {
        // width: 186rpx;
        height: 38rpx;
        flex-shrink: 0;
        border-radius: 6rpx;
        border: 0.5rpx solid rgba(29, 29, 29, 0.47);
        border-radius: 6rpx;
        // background: #FCCE00;
        color: #1d1d1d;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1rpx;
        padding-right: 20rpx;
        margin: auto;
      }
    }

    .current {
      width: 28rpx;
      color: #fff;
      position: absolute;
      background: linear-gradient(288.98deg, #66d6e2 2.03%, #278aff 104.95%);
      height: 100%;
      left: 0;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 8rpx 0 0 8rpx;
    }
  }

  .status {
    width: 200rpx;
    height: 70rpx;
    position: absolute;
    z-index: 1;
    right: 25rpx;
    top: 25rpx;
    background: linear-gradient(100.15deg, #66d6e2 4%, #278aff 81.09%);
    border-radius: 0 15rpx 0 0;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    padding-left: 50rpx;
    padding-top: 10rpx;
    font-weight: 500;
  }
}
</style>
